<template>
  <div id="page-score-exchange">
    <h2>积分兑换
      <Button type="success" class="fr" @click="showProtocol()">设置俱乐部会员积分兑换协议</Button>
    </h2>

    <card>
      <Tabs :animated="false" v-model="selectTab">
        <TabPane label="积分兑换商品" name="goods-list">
          <goods-list v-if="selectTab === 'goods-list'"></goods-list>
        </TabPane>
        <TabPane label="积分兑换查询" name="score-used-list">
          <score-used-list v-if="selectTab === 'score-used-list'"></score-used-list>
        </TabPane>
      </Tabs>
    </card>

    <protocol-modal :form="protocol"></protocol-modal>
  </div>
</template>

<script>
  import goodsList from './components/score-exchange/goods'
  import scoreUsedList from './components/score-exchange/score-used'
  import protocolModal from './components/score-exchange/protocol-modal'

  export default {
    name: 'page-score-exchange',
    components: {
      goodsList,
      scoreUsedList,
      protocolModal
    },
    data () {
      return {
        selectTab: 'goods-list',
        protocol: {
          visible: false
        }
      }
    },
    methods: {
      showProtocol () {
        this.protocol.visible = true
      }
    }
  }
</script>

<style lang="less">
  #page-score-exchange {}
</style>
